<template>
  <div class="shopInfo-box">
    <transition  
        @before-enter='beforeEnter'
        @enter='enter'
        @after-enter='afterEnter'>
      <div class="ball"  ref="ball" v-show="flag">
    </div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-content  lunbo">
        <lunbo :lunboList="lunboList" ></lunbo>
      </div>
    </div>
  <div class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header">
      {{shopInfo.title}}
    </div>
    <!--内容区-->
    <div class="mui-card-content">
      <p class="price">
        市场价：<del>￥{{shopInfo.market_price}}</del>&nbsp;&nbsp;销售价：<span class="red">￥{{shopInfo.sell_price}}</span>
      </p>
      <p class="number">
        购买数量:<number :max="shopInfo.stock_quantity"></number>
      </p>
      <mt-button type="primary" size="small">立即购买</mt-button>&nbsp;&nbsp;
      <mt-button type="danger" size="small" @click="flag='true'">加入购物车</mt-button>
    </div>
  </div>
  <div class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header">商品参数
    </div>
    <!--内容区-->
    <div class="mui-card-content">
      <p>商品货号：{{shopInfo.goods_no}}</p>
      <p>库存情况：{{shopInfo.stock_quantity}}件</p>
      <p>上架时间：{{shopInfo.add_time |timeL}}</p>
    </div>
    <!--页脚，放置补充信息或支持的操作-->
    <div class="mui-card-footer">
      <mt-button type="primary" size="large" plain @click="getIntroduce(id)">图文介绍</mt-button>
      <mt-button type="danger" size="large" plain  @click="getComment(id)">商品评论</mt-button>
    </div>
  </div>
  </div>
</template>
<script>
import lunbo from '../comment/lunbotu.vue'
import number from '../comment/number.vue'
export default {
  data() {
    return {
      lunboList:'',
      shopInfo:'',
      id:this.$route.params.id,
      flag:false
    };
  },
  created(){
    this.getlubo();
    this.getInfo()
  },
  components:{
    lunbo,
    number
  },
  methods:{
    getlubo(){//获取轮播图
      this.$http.get('api/getthumimages/'+this.$route.params.id).then(res=>{
        this.lunboList=res.body.message
      })
    },
    getInfo(){ // 页面
       this.$http.get('api/goods/getinfo/'+this.$route.params.id).then(res=>{
        this.shopInfo=res.body.message[0]
      })
    },
    getIntroduce(id){//图文详情
      this.$router.push({name:'getIntroduce',params:{id}})
    },
    getComment(id){//评论
      this.$router.push({ name: "getComment", params: { id } });
    },
    beforeEnter(el){
      el.style.transform="translate(0,0)"
    },
    enter(el,done){
      el.offsetLeft;
      //动态计算小球的移动距离
       const ballMove = this.$refs.ball.getBoundingClientRect()//小球位置
       const navMove = document.getElementById('badge').getBoundingClientRect()//中点位置
       const moveLeft =navMove.left - ballMove.left; 
       const moveTop =navMove.top - ballMove.top; 
      el.style.transform=`translate(${moveLeft}px,${moveTop}px)`
      el.style.transition="all .8s cubic-bezier(.4,-0.3,1,.68)"
      done()
    },
    afterEnter(el){
      this.flag=false
    }
  }
}
</script>
<style lang="scss" scoped>
  .shopInfo-box{
    overflow: hidden;
    .mui-card{
      padding-bottom: 25px ;
      .mui-card-header{
        min-height: 62px;
      }
      .mui-card-content{
        padding-left:14px;
        padding-top: 10px; 
        .price{
          margin: 5px 0;
          .red{
          color: red;
          font-weight: 800;
        }
        }
        .number{
          display:flex;
          line-height: 30px;
        }
      }
      .lunbo{
        text-align: center;
        padding: 0 ;
      }
      .mui-card-footer{
        display: block;
        button {
          margin: 15px 0;
        }
      }
    }
    .ball{
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      top: 400px;
      left: 140px;
      z-index: 99;
    }
  }
</style>